<div>
    <div class="row justify-content-center">
        <div class="col-md-8">
            <h1 jhiTranslate="reset.request.title">Reset your password</h1>

            <jhi-alert-error></jhi-alert-error>

            <div *ngIf="!success" class="alert alert-warning">
                <span jhiTranslate="reset.request.messages.info">Enter the email address you used to register.</span>
            </div>

            <div *ngIf="success" class="alert alert-success">
                <span jhiTranslate="reset.request.messages.success">Check your emails for details on how to reset your password.</span>
            </div>

            <form (ngSubmit)="requestReset()" *ngIf="!success" [formGroup]="resetRequestForm" name="form" role="form">
                <div class="form-group">
                    <label class="form-control-label" for="email" jhiTranslate="global.form.email.label">Email</label>
                    <input #email class="form-control" formControlName="email" id="email" name="email"
                           placeholder="{{ 'global.form.email.placeholder' | translate }}" type="email">

                    <div *ngIf="resetRequestForm.get('email')!.invalid && (resetRequestForm.get('email')!.dirty || resetRequestForm.get('email')!.touched)">
                        <small *ngIf="resetRequestForm.get('email')?.errors?.required"
                               class="form-text text-danger"
                               jhiTranslate="global.messages.validate.email.required">
                            Your email is required.
                        </small>

                        <small *ngIf="resetRequestForm.get('email')?.errors?.email"
                               class="form-text text-danger"
                               jhiTranslate="global.messages.validate.email.invalid">
                            Your email is invalid.
                        </small>

                        <small *ngIf="resetRequestForm.get('email')?.errors?.minlength"
                               class="form-text text-danger"
                               jhiTranslate="global.messages.validate.email.minlength">
                            Your email is required to be at least 5 characters.
                        </small>

                        <small *ngIf="resetRequestForm.get('email')?.errors?.maxlength"
                               class="form-text text-danger"
                               jhiTranslate="global.messages.validate.email.maxlength">
                            Your email cannot be longer than 100 characters.
                        </small>
                    </div>
                </div>

                <button [disabled]="resetRequestForm.invalid" class="btn btn-primary"
                        jhiTranslate="reset.request.form.button" type="submit">Reset
                </button>
            </form>
        </div>
    </div>
</div>
